<div class="row">
    <div class="col-md-6 col-lg-4" *ngFor="let command of settings.commands; let index = index">
        <app-card class="card">
            <div class="row">
                <div class="col-12">
                    <mat-form-field>
                        <mat-label>{{'commands.text' | translate}}</mat-label>
                        <input matInput [(ngModel)]="command.text" (ngModelChange)="onChange()">
                        <ng-container matSuffix >
                            <button mat-icon-button>
                                <mat-icon [matTooltip]="'commands.tooltip' | translate" matTooltipPosition="left">help</mat-icon>
                            </button>
                        </ng-container>
                    </mat-form-field>
                </div>
                <div class="col-12">
                    <mat-form-field>
                        <mat-label>{{'app.hotkey' | translate}}</mat-label>
                        <input matInput [value]="command.hotkey | hotkey" readonly>
                        <a matSuffix [href]="command.hotkey | hotkeyUrl">
                            <mat-icon> keyboard </mat-icon>
                        </a>
                    </mat-form-field>
                </div>
            </div>
        </app-card>
    </div>
</div>